<template>
  <div>
    <div class="pack" :style="packStyle" @touchend="packTouch"></div>
    <div class="pack_list" :style="packListStyle">
      <div class="sceneSelect" :style="sceneStyle" @touchend="sceneTouch"></div>
      <div class="overflow_pack">
        <div class="pack_scoll" ref="listScoll">
          <div class="iconList" :style="iconListWidth">
            <transition-group name="iconBounce">
              <Icon v-for="(item,index) in packList" :key="item.packId" :n="index" :indexIcon="item" />
            </transition-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll"
import Icon from "./icon.vue"
import { mapGetters, mapActions } from "vuex"
export default {
  components: {
    Icon
  },
  data() {
    return {
      packIsShow: false,
      packIsScene: false
    }
  },
  created() {
    this.personScroll()
  },
  computed: {
    packList() {
      return this.packIsScene ? this.pack.filter(item => { return item.type === "scene" }) : this.pack.filter(item => { return item.type !== "scene" })
    },
    packListStyle() {
      const scale = this.packIsShow ? 1 : 0
      return {
        transform: "scale(" + scale + ")",
      }
    },
    packStyle() {
      const grayscale = this.packIsScene && this.packIsShow ? 1 : 0
      return {
        filter: "grayscale(" + grayscale + ")"
      }
    },
    sceneStyle() {
      const grayscale = this.packIsScene ? 0 : 1
      return {
        filter: "grayscale(" + grayscale + ")"
      }
    },
    iconListWidth() {
      return {
        width: 20 + this.packList.length * 16 + "vh",
        transition: "all .5s"
      }
    },
    ...mapGetters("packStatus", {
      pack: "getPack",
    })
  },
  methods: {
    //背包滚动
    personScroll() {
      // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.listScoll, {
            startY: 100,
            click: false,
            scrollX: true
          })
        }
        else {
          this.scroll.refresh()
        }
      })
    },
    //点击展开背包
    packTouch: function () {
      this.clickMusic()
      if (this.packIsScene) {
        this.packIsScene = false
        this.scroll.scrollTo(0, 0)
      }
      else {
        this.packIsShow = !this.packIsShow
      }
    },
    //点击显示场景
    sceneTouch: function () {
      this.clickMusic()
      this.scroll.scrollTo(0, 0)
      this.packIsScene = true
    }
  }
}
</script>

<style lang="stylus" scoped>
.pack
  background url($urlTitle + 'icon/icon-背包.png') 0 0 / 100% 100%
  $coord('WHLB', 14vh, 14vh, 5vh, 5vh)
  transform translate(calc(0px - var(--X)), var(--Y))
  z-index 101
.pack_list
  background rgba(255, 255, 255, 0.4)
  $coord('WHLB', 80vw, 15vh, 4vh, 4.5vh)
  margin-left calc(0px - var(--X))
  margin-bottom calc(0px - var(--Y))
  transition all 0.3s
  transform-origin 2vh 5.5vh
  z-index 100
  border-radius 5vh
  .sceneSelect
    background url($urlTitle + 'icon/icon-选择背景.png') 0 0 / 100% 100%
    $coord('WHRB', 14vh, 14vh, 1vh, 0.5vh)
    z-index 99
  .overflow_pack
    $coord('WHLB', 93%, 90vh, 3%, 0)
    overflow hidden
    pointer-events none
    .pack_scoll
      $coord('WHLB', 80%, 15vh, 0, 0)
      .iconList
        position absolute
        left 0
        height 15vh
</style>